<template>
  <div>
    <h1>情况一：监视[ref]定义的[基本类型]数据</h1>
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="updateSum">点我 sum + 1</button>
    <br />
    <h1>情况二：监视[ref]定义的[对象类型]数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="updateName">修改姓名</button>
    <button @click="updateAge">修改年龄</button>
    <button @click="updatePerson">修改个人信息</button>
    <br />
    <h1>情况三：监视[reactive]定义的[对象类型]数据</h1>
    <h2>姓名：{{ personReactive.name }}</h2>
    <h2>年龄：{{ personReactive.age }}</h2>
    <button @click="updateNameReactive">修改姓名</button>
    <button @click="updateAgeReactive">修改年龄</button>
    <button @click="updatePersonReactive">修改个人信息</button>

    <h1>情况四：监视[ref]或[reactive]定义的[对象类型]数据中的某个属性</h1>
    <h2>姓名：{{ personReactive.name }}</h2>
    <h2>年龄：{{ personReactive.age }}</h2>
    <button @click="updateNameReactive">修改姓名</button>
    <button @click="updateAgeReactive">修改年龄</button>
    <button @click="updatePersonReactive">修改个人信息</button>
  </div>
</template>

<script setup lang="ts" name="watchPage">
  import { reactive, ref, watch } from 'vue';

  // 监视,情况一：监视[ref]定义的[基本类型]数据
  // 数据
  let sum = ref(0);
  // 方法
  function updateSum() {
    sum.value += 1;
  }
  // 监视,情况一：监视[ref]定义的[基本类型]数据
  // watch(监视谁，回调函数);
  // watch 函数会返回一个 停止监听的函数（stop function）。
  const stopWatch1 = watch(sum, (newValue, oldValue) => {
    console.log(newValue, oldValue);
    if (newValue >= 10) {
      stopWatch1();
    }
  });

  let person = ref({
    name: '张三',
    age: 18
  });

  function updateName() {
    person.value.name += '~';
  }

  function updateAge() {
    person.value.age += 1;
  }

  function updatePerson() {
    person.value = { name: '李四', age: 88 };
  }

  // 情况二：监视[ref]定义的[对象类型]数据，监视的对象是 对象的地址值，若想监视对象内部属性的变化，需要手动开启深度模式（deep:true)
  // watch 的第一个参数 监视的是：被监视的数据
  // watch 的第二个参数 监视的是：监视的回调
  // watch 的第三个参数 监视的是：配置对象（deep,immediate等）
  watch(
    person,
    (newValue, oldValue) => {
      console.log('person改变了', newValue, oldValue);
    },
    { deep: true, immediate: true }
    // { deep: true}
  );

  // 情况三：监视[reactive]定义的[对象类型]数据
  let personReactive = reactive({
    name: '张三',
    age: 18
  });

  function updateNameReactive() {
    personReactive.name += '~';
  }

  function updateAgeReactive() {
    personReactive.age += 1;
  }

  function updatePersonReactive() {
    // personReactive = { name: '李四', age: 88 };
    Object.assign(personReactive, { name: '李四', age: 88 });
  }

  // 情况三：监视[reactive]定义的[对象类型]数据。默认是开启深度监视的
  watch(personReactive, (newValue, oldValue) => {
    console.log('personReactive变化了', newValue, oldValue);
  });
</script>

<style scoped></style>
